<%--
  Created by IntelliJ IDEA.
  User: 木棉m
  Date: 2021/11/8
  Time: 20:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <%--    <script type="text/javascript" src="../js/echarts.js" ></script>--%>

    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<%--    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>--%>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<%--        <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>--%>
    <title>电信用户行为分析</title>

    <style type="text/css">
    html{
        background-color: #001012;
        color:#ffffff;
        height: 300px;
        width: 100%;
    }


    </style>
</head>
<body>
<h1>hello</h1>
<h2>xixixii</h2>

<script type="text/javascript">
    document.write("<span id=time></span>");  //输出显示时间日期的容器
    setInterval(function(){
        var d=new Date();                          //创建Date对象
        time.innerText=d.getFullYear()             //调用getFullYear()方法获得四位数年份
            +"年"+(d.getMonth()+1)                     //调用getMonth()方法获得月份（0-11）
            +"月"+d.getDate()                          //调用getDate()方法获得一个月中的某一天（1-31）
            +"日 星期"+"日一二三四五六".charAt(d.getDay())  // arrary.charAt（index) 调用getDay()获得一周中的某一天（0-6）作为字符数组下标
            +" "+d.getHours()                               //获取小时（0-23）
            +":"+d.getMinutes()                             //获取分（0-59）
            +":"+d.getSeconds();                            //获取秒（0-59）
    },1000)
    </script>
<%--<div id="main" style="width: 600px;height: 400px;background-color: antiquewhite"></div>--%>
<script type="text/javascript">
<%--    var ROOT_PATH =--%>
<%--        'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';--%>
<%--    var chartDom = document.getElementById('main');--%>
<%--    var myChart = echarts.init(chartDom);--%>
<%--    // var so=[["Income","Life Expectancy","Population","Country","Year"],[815,34.05,351014,"Australia",1800],[1314,39,645526,"Canada",1800],[985,32,321675013,"China",1800],[864,32.2,345043,"Cuba",1800],[1244,36.5731262,977662,"Finland",1800],[1803,33.96717024,29355111,"France",1800],[1639,38.37,22886919,"Germany",1800],[926,42.84559912,61428,"Iceland",1800],[1052,25.4424,168574895,"India",1800],[1050,36.4,30294378,"Japan",1800],[579,26,4345000,"North Korea",1800],[576,25.8,9395000,"South Korea",1800],[658,34.05,100000,"New Zealand",1800],[1278,37.91620899,868570,"Norway",1800],[1213,35.9,9508747,"Poland",1800],[1430,29.5734572,31088398,"Russia",1800],[1221,35,9773456,"Turkey",1800],[3431,38.6497603,12327466,"United Kingdom",1800],[2128,39.41,6801854,"United States",1800],[834,34.05,342440,"Australia",1810],[1400,39.01496774,727603,"Canada",1810],[985,32,350542958,"China",1810],[970,33.64,470176,"Cuba",1810],[1267,36.9473378,1070625,"Finland",1810],[1839,37.4,30293172,"France",1810],[1759,38.37,23882461,"Germany",1810]]--%>
<%--    $.get(--%>
<%--        ROOT_PATH + '/data/asset/data/life-expectancy-table.json',--%>
<%--        function (_rawData) {--%>
<%--            run(_rawData);--%>
<%--        }--%>
<%--    );--%>
<%--    function run(_rawData) {--%>
<%--        option = {--%>
<%--            dataset: [--%>
<%--                {--%>
<%--                    id: 'dataset_raw',--%>
<%--                    source: _rawData--%>
<%--                },--%>
<%--                {--%>
<%--                    id: 'dataset_since_1950_of_germany',--%>
<%--                    fromDatasetId: 'dataset_raw',--%>
<%--                    transform: {--%>
<%--                        type: 'filter',--%>
<%--                        config: {--%>
<%--                            and: [--%>
<%--                                { dimension: 'Year', gte: 1950 },--%>
<%--                                { dimension: 'Country', '=': 'Germany' }--%>
<%--                            ]--%>
<%--                        }--%>
<%--                    }--%>
<%--                },--%>
<%--                {--%>
<%--                    id: 'dataset_since_1950_of_france',--%>
<%--                    fromDatasetId: 'dataset_raw',--%>
<%--                    transform: {--%>
<%--                        type: 'filter',--%>
<%--                        config: {--%>
<%--                            and: [--%>
<%--                                { dimension: 'Year', gte: 1950 },--%>
<%--                                { dimension: 'Country', '=': 'France' }--%>
<%--                            ]--%>
<%--                        }--%>
<%--                    }--%>
<%--                }--%>
<%--            ],--%>
<%--            title: {--%>
<%--                text: 'Income of Germany and France since 1950'--%>
<%--            },--%>
<%--            tooltip: {--%>
<%--                trigger: 'axis'--%>
<%--            },--%>
<%--            xAxis: {--%>
<%--                type: 'category',--%>
<%--                nameLocation: 'middle'--%>
<%--            },--%>
<%--            yAxis: {--%>
<%--                name: 'Income'--%>
<%--            },--%>
<%--            series: [--%>
<%--                {--%>
<%--                    type: 'line',--%>
<%--                    datasetId: 'dataset_since_1950_of_germany',--%>
<%--                    showSymbol: false,--%>
<%--                    encode: {--%>
<%--                        x: 'Year',--%>
<%--                        y: 'Income',--%>
<%--                        itemName: 'Year',--%>
<%--                        tooltip: ['Income']--%>
<%--                    }--%>
<%--                },--%>
<%--                {--%>
<%--                    type: 'line',--%>
<%--                    datasetId: 'dataset_since_1950_of_france',--%>
<%--                    showSymbol: false,--%>
<%--                    encode: {--%>
<%--                        x: 'Year',--%>
<%--                        y: 'Income',--%>
<%--                        itemName: 'Year',--%>
<%--                        tooltip: ['Income']--%>
<%--                    }--%>
<%--                }--%>
<%--            ]--%>
<%--        };--%>
<%--        myChart.setOption(option);--%>
<%--    }--%>

<%--    option && myChart.setOption(option);--%>

</script>
<div>hhhhh</div>
<div>${areaChannelData }</div>
<div>nnnnnnn</div>
<div>${areaChannelList}</div>

<c:forEach items="${cityNum }" var="u" varStatus="status">

    <tr>
        <td style="width: 100px; text-align: center;">${u.name }</td>
        <td style="width: 100px; text-align: center;">${u.value }</td>
    </tr>
</c:forEach>
<h1>00000</h1>
<h1>${cityNum}</h1>

<div id="map" style="width: 800px;height: 600px;background-color: #000000"></div>
<script type="text/javascript">
    var cityData = '${cityNum}';
    cityData=JSON.parse(cityData)
    console.log('data')
    console.log(cityData)
    console.log(typeof cityData)

    // console.log(cityData.data)


    //中国地图
    var chartDom1 = document.getElementById('map');
    var myChart1 = echarts.init(chartDom1);
    //中国地图
    function randomData() {
        return Math.round(Math.random()*500);
    }

    optionChinaMap = {
        tooltip : {
            trigger: 'item'
        },
        legend: {
            orient: 'horizontal',//图例的排列方向
            textStyle: {color:'#fff'},
            x:'left',//图例的位置
            y:'20',

            data:['全国数据']
        },

        visualMap: {//颜色的设置  dataRange
            textStyle: {color:'#fff'},
            x: 'left',
            y: 'bottom',
            splitList: [
                {start: 1500},{start: 900, end: 1500},
                {start: 310, end: 1000},{start: 200, end: 300},
                {start: 50, end: 200},{start: 0, end: 50},
            ],
            // text:['高','低'],// 文本，默认为数值文本
            // color: ['#65A2D9', '#E09107', '#A3E00B']
            color: ['#5475f5', '#9feaa5', '#3FA7FF','#66E0E3', '#FFDC5E', '#9fb5ea']
        },
        // roamController: {//控制地图的上下左右放大缩小
        //     show: true,
        //     x: 'right',
        //     mapTypeControl: {
        //         'china': true
        //     }
        // },
        series : [
            {
                name: '全国数据',
                type: 'map',
                mapType: 'china',
                zoom: 1.1,
                roam: false,//是否开启鼠标缩放和平移漫游
                itemStyle:{//地图区域的多边形 图形样式
                    normal:{//是图形在默认状态下的样式
                        label:{
                            show: true,
                            textStyle: {color: "rgb(249, 249, 249)"}
                        }
                    },
                    emphasis:{//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                        label:{show:true},
                    }
                },
                top:"100",//组件距离容器的距离
                data:cityData.data
                // data:[
                //     {name: '北京',value: '100' },{name: '天津',value: randomData() },
                //     {name: '上海',value: randomData() },{name: '重庆',value: randomData() },
                //     {name: '河北',value: randomData() },{name: '河南',value: randomData() },
                //     {name: '云南',value: randomData() },{name: '辽宁',value: randomData() },
                //     {name: '黑龙江',value: randomData() },{name: '湖南',value: randomData() },
                //     {name: '安徽',value: randomData() },{name: '山东',value: randomData() },
                //     {name: '新疆',value: randomData() },{name: '江苏',value: randomData() },
                //     {name: '浙江',value: randomData() },{name: '江西',value: randomData() },
                //     {name: '湖北',value: randomData() },{name: '广西',value: randomData() },
                //     {name: '甘肃',value: randomData() },{name: '山西',value: randomData() },
                //     {name: '内蒙古',value: randomData() },{name: '陕西',value: randomData() },
                //     {name: '吉林',value: randomData() },{name: '福建',value: randomData() },
                //     {name: '贵州',value: randomData() },{name: '广东',value: randomData() },
                //     {name: '青海',value: randomData() },{name: '西藏',value: randomData() },
                //     {name: '四川',value: randomData() },{name: '宁夏',value: randomData() },
                //     {name: '海南',value: randomData() },{name: '台湾',value: randomData() },
                //     {name: '香港',value: randomData() },{name: '澳门',value: randomData() }
                // ]
            }
        ]
    };

    myChart1.setOption(optionChinaMap, true);
</script>


</body>
</html>
